<template>
  <div class="tabControl">
    <div v-for="(item, index) in title" :key="index" class="tabControl-item" :class="{active: myIndex === index}" @click="itemclick(index)">
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "tabControl",
  data() {
    return {
        myIndex: 0
    }
  },
  props: {
    title: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods:{
      itemclick(index){
          this.myIndex = index
          this.$emit('tabClick',index)
      }
  }
};
</script>
<style scoped>
.tabControl {
  display: flex;
  text-align: center;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  border-radius: px;
  margin-bottom: 4px;
}
.tabControl-item {
  flex: 1;
}
span {
  padding: 5px;
}
.active span {
  border-bottom: 3px solid pink;
}

</style>
